<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/手机端.css"/>
	<body>
		<div id="hd">
			<header>
				<div class="circle" id="circle1"></div>
				<div class="circle" id="circle2"></div>
			</header>
		</div>
		<div id="menu">
			<ul>
				<li><a href="#"><i class="i1"></i><span>首页</span></a></li>
				<li><a href="#"><i class="i2"></i><span>搜索</span></a></li>
				<li><a href="#"><i class="i3"></i><span>分类</span></a></li>
				<li><a href="#"><i class="i4"></i><span>购物车</span></a></li>
				<li><a href="#"><i class="i5"></i><span>我的</span></a></li>
			</ul>
		</div>
		
		<div class="max_imgs">
			<div id="imgs">
			    <img src="img/001.png"/>
			    <img src="img/002.png"/>
			    <img src="img/003.png"/>
			    <img src="img/004.png"/>
			    <img src="img/005.png"/>
			    <img src="img/006.png"/>
			    <img src="img/007.png"/>
			</div>
			<div>
				<span id="num">1</span>/
				<span>7</span>
			</div>
		</div>
		
		<div class="body1">
			<div class="h1">
				<p class="p1">
					<em>
						<small>¥</small>3699
					</em>
				</p>
				<p class="p2">
					<h1>荣耀 50 Pro 1亿像素超清影像 100W超级快充 10亿色超曲屏 5G全网通 8GB+256GB（荣耀密码）</h1>
				</p>
				<a href="#">【老用户专享限量加赠移动电源，点此参加》》】①99享7折保值换新（请注意勾选）②享6期分期免息</a>
			</div>
			<div class="h2">
				<div class="h2_1">
					<div>
						<div class="h2_11">赠品</div>
						<div class="h2_12"><img src="img/zengpin.png"/></div>
					</div>
					<div id="icon_right"></div>
				</div>
			</div>
			
			<div class="h3">
				<div class="h3_1">
					<span class="h3_1_1">促销</span>
					<ul class="h3_1_2">
						<li class="h3_1_21">
							<span class="h3_1_22">分期免息</span>
							<span class="h3_1_23">花呗、掌上生活、银联分期支付</span>
						</li>
						<li class="h3_1_21">
							<span class="h3_1_22">赠送积分</span>
							<span class="h3_1_23">够买即赠商城积分，积分可抵现</span>
						</li>
					</ul>
					<div id="icon_right"></div>
				</div>
			</div>
		</div>
		
		<div id="zhezhao"></div>
		<div id="hidden1">
			<div class="hidden1_1">
				<span>赠品</span>
				<span id="close1" style="color: #CCCCCC;font-weight: normal;font-size: 1rem;">x</span>
			</div>
			<div class="hidden1_2">
				<div class="hidden1_2_1">
					<div id="imgs2"><img src="img/zengpin.png"/><img src="img/zengpin2.png" style="display: none;"/></div>
					<p id="hp1"><span>【礼品】荣耀50 Pro龚俊手机壳-龚喜发财</span><span style="display: none;">【礼品】荣耀50 Pro龚俊手机壳-发</span><span>x1</span></p>
					<p id="hp2"><span style="border: 1px solid #E01D20;">龚喜发财</span> <span>发</span></p>
				</div>
			</div>
		</div>
		
		<div class="hf"></div>
		    
		<div class="body2">
			<div class="body2_1">
				<div class="body2_1_1">颜色</div>
				<div class="body2_1_2">
					<span class="body2_1_21">亮黑色</span>
					<span class="body2_1_21">墨玉青</span>
					<span class="body2_1_21">初雪水晶</span>
					<span class="body2_1_21">夏日琥珀</span>
					<span class="body2_1_21">荣耀密码</span>
				</div>
			</div>
		</div>
		
		<div class="body2">
			<div class="body2_1">
				<div class="body2_1_1">版本</div>
				<div class="body2_1_2 ">
					<span class="body2_1_21">5G全网通 8GB+256GB</span>
					<span class="body2_1_21">5G全网通 12GB+256GB</span>
				</div>
			</div>
		</div>
		
		<div class="body2">
			<div class="body2_1">
				<div class="body2_1_1">类型</div>
				<div class="body2_1_2">
					<span class="body2_1_21">官方标配</span>
				</div>
			</div>
		</div>
		
		<div class="body2">
			<div class="body2_1">
				<div class="body2_1_1">套餐</div>
				<div class="body2_1_2">
					<span class="body2_1_21">单品</span>
					<span class="body2_1_21">耳机套餐</span>
					<span class="body2_1_21">手机套餐</span>
				</div>
			</div>
		</div>
		
		<div class="body2">
			<div class="body2_1 body_21">
				<div class="body2_1_1">数量</div>
				<div class="body2_1_2">
					<b style="opacity: 0.3;" class="body2_1_2_1">-</b>
					<span id="s1" class="body2_1_2_2">1</span>
					<b style="opacity: 0.9;" class="body2_1_2_1">+</b>
				</div>
			</div>
		</div>
		
		<div class="body3">
			<div class="body3_1">
				保障
			</div>
			<div class="body3_2">
				<div class="body3_2_1">
					<div class="body3_2_11">
						选购
					</div>
					<div class="body3_2_12">
						碎屏服务
					</div>
					<div class="body3_2_12">
						延长服务
					</div>
				</div>
				<div id="icon_right" class="icon3"></div>
			</div>
		</div>
		
		<div class="body3">
			<div class="body3_1">免息</div>
			<div class="body3_2">
				<div class="body3_2_1">
					<div class="body3_2_11">
						花呗/掌上生活分期直购，最高享12期免息
					</div>
				<div id="icon_right" class="icon3"></div>
			    </div>
		    </div>
		</div>
		
		<div class="hf"></div>
		
		<div class="body4">
			<label>搭配</label>
			<div class="body4_1">
				<div class="body4_11">
					<img src="img/dp1.png"/>
					<div class="body4_111"><p class="body4_1111">省1000</p></div>
				</div>
				<div class="body4_12">
					
				</div>
				<div class="body4_11">
					<img src="img/dp2.png"/>
					<div class="body4_111"><p class="body4_1111">省10</p></div>
				</div>
				<div class="body4_12">
					
				</div>
				<div class="body4_11">
					<img src="img/dp3.png"/>
					<div class="body4_111"><p class="body4_1111">省200</p></div>
				</div>
				<div class="body4_12">
					
				</div>
				<div class="body4_11">
					<div class="body4_111"><p class="body4_1111">省30</p></div>	
					<img src="img/dp4.png"/>
				</div>
				<div id="icon_right" class="icon4"></div>
			</div>
		</div>
		
		<div class="hf"></div>
		
		<div class="h2 hh2">
			<div class="h2-1">
					<div class="h2-11">服务</div>
					<p>
						<span>已满48元包邮</span>
						<span>由荣耀终端负责发货，并提供售后咨询服务</span>
					</p>
				<div id="icon_right"></div>
			</div>
		</div>
		<div class="hf"></div>
		<div class="body5">
			<h2>精选推荐</h2>
		</div>
		<div class="body6">
			<div class="bd6_max">
				<div class="bd6_middle">
					<div class="bd6_min">
						<div class="bd6_mm">
							<img src="img/tp0.png"/>
						</div>
						<p>荣耀50</p>
						<div class="bd6_mm1">
							<span>￥</span>
							<span>2699</span>
						</div>
					</div>
					
					<div class="bd6_min">
						<div class="bd6_mm">
							<img src="img/tp0.png"/>
						</div>
						<p>荣耀50</p>
						<div class="bd6_mm1">
							<span>￥</span>
							<span>2699</span>
						</div>
					</div>
					
					<div class="bd6_min">
						<div class="bd6_mm">
							<img src="img/tp0.png"/>
						</div>
						<p>荣耀50</p>
						<div class="bd6_mm1">
							<span>￥</span>
							<span>2699</span>
						</div>
					</div>
					
				</div>
				
				<div class="bd6_middle">
					<div class="bd6_min">
						<div class="bd6_mm">
							<img src="img/tp0.png"/>
						</div>
						<p>荣耀50</p>
						<div class="bd6_mm1">
							<span>￥</span>
							<span>2699</span>
						</div>
					</div>
					
					<div class="bd6_min">
						<div class="bd6_mm">
							<img src="img/tp0.png"/>
						</div>
						<p>荣耀50</p>
						<div class="bd6_mm1">
							<span>￥</span>
							<span>2699</span>
						</div>
					</div>
					
					<div class="bd6_min">
						<div class="bd6_mm">
							<img src="img/tp0.png"/>
						</div>
						<p>荣耀50</p>
						<div class="bd6_mm1">
							<span>￥</span>
							<span>2699</span>
						</div>
					</div>
					
				</div>
				
			</div>
		</div>
		<div class="hf"></div>
		
		<p><img src="img/bg1.png"/></p>
		<p><img src="img/bg2.jpg"/></p>
		<p><img src="img/bg3.png"/></p>
		<p><img src="img/bg4.png"/></p>
		<p><img src="img/bg5.png"/></p>
		<p><img src="img/bg6.png"/></p>
		<p><img src="img/bg7.png"/></p>
		<p><img src="img/bg8.png"/></p>
		<p><img src="img/bg9.png"/></p>
		<p><img src="img/bg10.png"/></p>
		<p><img src="img/bg11.png"/></p>
		<p><img src="img/bg12.png"/></p>
		<p><img src="img/bg13.png"/></p>
		<p><img src="img/bg14.png"/></p>
		<p><img src="img/bg15.png"/></p>
		<p><img src="img/bg16.png"/></p>
		<p><img src="img/bg17.png"/></p>
		<p><img src="img/bg18.png"/></p>
		<p><img src="img/bg19.jpg"/></p>
		<script type="text/javascript">
		    var imgs1=document.querySelectorAll("#imgs>img");
		    var count=0;
		    timer=setInterval(()=>{
		    	count+=100;
		    	count==700&&(count=0);
		    	num.innerHTML==7&&(num.innerHTML=0);
		    	num.innerHTML=parseInt(num.innerHTML)+1;
		    	imgs.style.marginLeft="-"+count+"%";
		    },3000)
			var count1=0;
			circle2.onclick=()=>{
				count1++;
				if(count1%2==1){
					menu.style.display="block";
				}else{
					menu.style.display="none";
				}
			}
			icon_right.onclick=function(){
				zhezhao.style.display="block";
				hidden1.style.display="block";
				console.log(666);
			}
			close1.onclick=function(){
				zhezhao.style.display="none";
				hidden1.style.display="none";
			}
			var hdbtn=document.querySelectorAll("#hp2>span");
			var imgs2=document.querySelectorAll("#imgs2>img")
			var hdp=document.querySelectorAll("#hp1>span");
			for(let j=0;j<hdbtn.length;j++){
				hdbtn[j].onclick=function(){
					for(var n=0;n<hdbtn.length;n++){
						hdbtn[n].style.border="1px solid rgba(178,178,178,.5)";
						imgs2[n].style.display="none";
						hdp[n].style.display="none";
					}
					this.style.border="1px solid #E01D20";
					imgs2[j].style.display="block";
					hdp[j].style.display="block";
				}
			}
			var btn2=document.querySelectorAll(".body2_1_2>b");
			for(var l=0;l<btn2.length;l++){
				btn2[0].onclick=function(){
					btn2[1].style.opacity="0.9";
					btn2[0].style.opacity="0.3";
					s1.innerHTML="1";
					}
				btn2[1].onclick=function(){
					btn2[0].style.opacity="0.9";
					btn2[1].style.opacity="0.3";	
					s1.innerHTML="2";
				}
			
			}
		var btns=document.querySelectorAll(".body2_1_2");
		for(let i=0;i<btns.length;i++){
			var btnss=btns[i].querySelectorAll(".body2_1_21");
//			for(var j=0;j<)
//			console.log(btns);
			console.log(btnss.length);
		}
//		console.log(btns);
//		console.log(btnss);
		</script>
	</body>
</html>
